<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item prop="statistics">
        <el-select
          v-model="queryParams.statistics"
          placeholder="请选择统计类型"
          @change="dateTypeChange"
        >
          <el-option
            v-for="item in countList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="params.startTime">
        <el-date-picker
          v-model="queryParams.params.startTime"
          value-format="yyyy-MM-dd"
          :type="dataType"
          placeholder="开始日期"
          @change="timeChange"
        />
      </el-form-item>
      <el-form-item prop="params.endTime">
        <el-date-picker
          v-model="queryParams.params.endTime"
          value-format="yyyy-MM-dd"
          :type="dataType"
          placeholder="结束日期"
          @change="timeChange"
        />
      </el-form-item>
      <el-form-item prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="客户名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          查询
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10">
      <p>充值金额：￥{{ rechargeTotal }}</p>
    </el-row>

    <el-table v-loading="loading" border :data="dataList">
      <el-table-column label="费用编号" align="center" prop="sn" />
      <el-table-column label="费用类型" align="center" prop="paymentMethod">
        <template slot-scope="scope">
          <span>{{ scope.row.paymentMethod | ctPaymentMethod }}</span>
        </template>
      </el-table-column>
      <el-table-column label="充值金额" align="center" prop="money" />
      <el-table-column label="联系人" align="center" prop="nickName" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.params.pageNum"
      :limit.sync="queryParams.params.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listRecharge, totalMoney } from "@/api/financialManagement/rechargeManagement";

export default {
  data() {
    return {
      rechargeTotal: "", // 充值总金额
      // consumptionTotal: "", // 消费总金额
      dataType: "month", //日期类型
      loading: false, // 遮罩层
      showSearch: true, // 显示搜索条件
      total: 0, // 总条数
      dataList: [], // 充值管理表格数据
      // 查询参数
      queryParams: {
        statistics: null, //按月统计下拉框的值
        nickName: "", //客户名称
        paymentMethod: "other",
        params: {
          pageNum: 1,
          pageSize: 10,
          startTime: null, //开始时间
          endTime: null, //结束时间
        },
      },
      //下拉框按月统计
      countList: [
        { value: "month", label: "按月统计" },
        { value: "season", label: "按季统计" },
        { value: "year", label: "按年统计" },
        { value: "day", label: "按日统计" },
      ],
    };
  },
  created() {
    //获取表格数据
    this.getList();
    //获取消费金额和充值金额
    this.getTotalMoney();
  },
  methods: {
    /** 查询角色信息列表 */
    getList() {
      this.loading = true;
      listRecharge(this.queryParams)
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 时间选择改变
    timeChange(e) {
      if (e == "" || e == null) {
        this.queryParams.params.startTime = "";
        this.queryParams.params.endTime = "";
        return;
      }
      let date = new Date(e);
      if (this.queryParams.statistics == "season") {
        let y = date.getFullYear();
        let m = date.getMonth();
        if (m >= 0 && m <= 2) {
          this.queryParams.params.startTime = y + "-01-01";
          this.queryParams.params.endTime = y + "-03-31";
        } else if (m >= 3 && m <= 5) {
          this.queryParams.params.startTime = y + "-04-01";
          this.queryParams.params.endTime = y + "-06-30";
        } else if (m >= 6 && m <= 8) {
          this.queryParams.params.startTime = y + "-07-01";
          this.queryParams.params.endTime = y + "-09-30";
        } else if (m >= 9 && m <= 11) {
          this.queryParams.params.startTime = y + "-10-01";
          this.queryParams.params.endTime = y + "-12-31";
        }
      }
    },

    /**获取充值总金额和消费总金额 */
    getTotalMoney() {
      totalMoney(this.queryParams).then((res) => {
        this.rechargeTotal = res.data.all;
        this.consumptionTotal = res.data.consumption;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.params.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    // 切换时间选择器的类型
    dateTypeChange(e) {
      if (e === "month") {
        this.dataType = "month";
      } else if (e === "year") {
        this.dataType = "year";
      } else if (e === "day") {
        this.dataType = "date";
      } else if (e === "season") {
        this.dataType = "month";
      }
    },
  },
};
</script>
